<template>
  <div class="userInfo-page">
    <mt-header fixed title="账户信息">
      <div slot="left" @click="$router.go(-1)">
        <mt-button icon="back"></mt-button>
      </div>
    </mt-header>
    <section class="profile-info">
      <section class="headportrait" style="margin-top: 0;">
        <!-- <input type="file" class="profileinfopanel-upload" @change="uploadAvatar"> -->
        <h2>头像</h2>
        <div class="headportrait-div">
          <img v-if="userInfo&&userInfo.user_id&&userInfo.avatar" :src="userInfo.avatar" class="headportrait-div-top">
          <img v-else class="headportrait-div-top" src="">
          <span class="headportrait-div-bottom">
            <svg fill="#d8d8d8">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
            </svg>
          </span>
        </div>
      </section>
      <router-link to="/user/username" class="info-router">
        <section class="headportrait headportraitwo">
          <h2>用户名</h2>
          <div class="headportrait-div">
            <p>{{userInfo.username}}</p>
            <span class="headportrait-div-bottom">
              <svg fill="#d8d8d8">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
              </svg>
            </span>
          </div>
        </section>
      </router-link>
      <section class="bind-phone">
        账号绑定
      </section>
      <section class="info-router">
        <section class="headportrait headportraitwo headportraithree">
          <h2>
            <svg fill="#0097FF">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mobile"></use>
            </svg>
            手机
          </h2>
          <div class="headportrait-div">
            <p v-if="userInfo.mobile">{{userInfo.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}</p>
            <span class="headportrait-div-bottom">
              <svg fill="#d8d8d8">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
              </svg>
            </span>
          </div>
        </section>
      </section>
      <section class="bind-phone">
        安全设置
      </section>
      <router-link to="/user/forget" class="info-router">
        <section class="headportrait headportraitwo headportraithree">
          <h2>登录密码</h2>
          <div class="headportrait-div">
            <p class="blue">修改</p>
            <span class="headportrait-div-bottom">
              <svg fill="#d8d8d8">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
              </svg>
            </span>
          </div>
        </section>
      </router-link>
      <section class="exitlogin" @click="outlogin()">退出登录</section>
  </section>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  head: {
    title: "账户信息"
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    ...mapActions(["outLogin"]),
    outlogin() {
      this.outLogin();
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/styles/mixin";

.userInfo-page {
  padding: px2rem(88px) 0 0 0;
  .rating_page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f2f2;
    z-index: 202;
    padding-top: 1.95rem;
    p,
    span {
      font-family: Helvetica Neue, Tahoma, Arial;
    }
  }
  .profile-info {
    @include wh(100%, 3.1rem);
    .profileinfopanel-upload {
      display: block;
      position: absolute;
      opacity: 0;
      top: 2.35rem;
      left: 0;
      @include wh(100%, 3.1rem);
    }
    .headportrait {
      margin-top: 0.4rem;
      padding: 0.5rem 0.4rem;
      @include fj(space-between);
      align-items: center;
      border-top: 1px solid #ddd;
      background: #fff;

      h2 {
        @include sc(0.6rem, #333);
        font-weight: 500;
        display: flex;
        align-items: center;
        svg {
          width: px2rem(32px);
          height: px2rem(32px);
          margin-right: 5px;
        }
      }
      .headportrait-div {
        display: flex;
        span {
          display: inline-block;
          svg {
            @include wh(100%, 100%);
          }
        }
        .headportrait-div-top {
          @include wh(2.5rem, 2.5rem);
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 5px;
        }
        .headportrait-div-bottom {
          @include wh(0.66667rem, 1.4rem);
          position: relative;
          top: 0.44rem;
        }
      }
    }
    .headportraitwo {
      margin-top: 0;
      padding: 0.3rem 0.4rem;
      .headportrait-div {
        @include fj(left);
        p {
          text-align: left;
          line-height: 1.39rem;
          @include sc(0.7rem, #666);
          margin-right: 0.2rem;
          font-family: Arial;
        }
        .blue {
          color: #0097ff;
        }
        .headportrait-div-bottom {
          top: 0;
        }
      }
    }
    .headportraithree {
      border-bottom: 1px solid #ddd;
    }
    .bind-phone {
      padding: 0.4rem 0.4rem;
      @include sc(0.5rem, #666);
    }
    .exitlogin {
      width: 100%;
      margin: 1.3rem auto 0;
      line-height: px2rem(100px);
      border-radius: 4px;
      text-align: center;
      background: #fff;
      @include sc(0.7rem, #ff5339);
    }
    .exitlogin:active {
      opacity: 0.8;
      background: #c1c1c1;
    }
  }
  .info-router {
    display: block;
  }
  .coverpart {
    @include wh(100%, 100%);
    @include allcover;
    .cover-background {
      @include wh(100%, 100%);
      @include allcover;
      background: #000;
      z-index: 100;
      opacity: 0.2;
    }
    .cover-content {
      width: 94%;
      background: $fc;
      padding: 17px;
      position: absolute;
      top: 20%;
      left: 3%;
      z-index: 1000;
      @include borderRadius(5px);
      .sa-icon {
        @include wh(90px, 90px);
        border: 4px solid #f8bb86;
        @include borderRadius(50%);
        margin: 20px auto;
        position: relative;
        .sa-body {
          @include wh(5px, 47px);
          @include borderRadius(2px);
          background: #f8bb86;
          @include cl;
          top: 10px;
        }
        .sa-dot {
          @include wh(7px, 7px);
          @include borderRadius(50%);
          background: #f8bb86;
          @include cl;
          bottom: 10px;
        }
      }
      h2 {
        width: 100%;
        text-align: center;
        @include sc(30px, #575757);
        font-weight: 500;
        margin: 25px 0;
      }
      .sa-botton {
        width: 100%;
        text-align: center;
        button {
          display: inline-block;
          padding: 0.4rem 1rem;
          border-radius: 4px;
          @include sc(0.6rem, $fc);
          letter-spacing: 1px;
          margin-top: 26px;
        }
        .waiting {
          background: #c1c1c1;
          margin-right: 0.4rem;
        }
        .quitlogin {
          background: rgb(221, 107, 85);
        }
      }
    }
  }
}
</style>
